<template>
	<Echart
		id="leftCenter1"
		:options="options"
		class="left_center_inner"
		ref="daycharts"
	/>
</template>

<script>
import { graphic } from 'echarts'

export default {
	props: ['info'],
	data() {
		return {
			options: {},
			dataX: [
				'2024-05-16',
				'2024-05-17',
				'2024-05-18',
				'2024-05-19',
				'2024-05-20',
				'2024-05-21',
				'2024-05-22',
			],
			dataY1: [13, 63, 30, 73, 17, 90, 20],
			dataY2: [10, 56, 30, 28, 16.0, 3, 10],
		}
	},
	created() {},
	watch: {
		info: {
			handler(newValue, oldValue) {
				if (newValue) {
					this.init()
				}
			},
			deep: true,
		},
	},
	beforeDestroy() {},
	methods: {
		init() {
			this.options = {
				legend: {
					x: 'center', //可设定图例在左、右、居中
					y: '10px',
					data: [this.info.cname],
					textStyle: {
						fontSize: 12,
						color: '#F1F1F3',
					},
				},
				xAxis: {
					type: 'category',
					data: this.info.xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(31,99,163,.2)',
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: 'rgba(31,99,163,.1)',
						},
					},
					axisLabel: {
						color: '#7EB7FD',
						fontWeight: '500',
					},
				},
				yAxis: {
					name: `单位 :${this.info.unit}`,
					type: 'value',
					nameTextStyle: {
						color: '#fff',
						fontSize: 12,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(31,99,163,.2)',
						},
					},
					axisLine: {
						lineStyle: {
							color: 'rgba(31,99,163,.1)',
						},
					},
					axisLabel: {
						color: '#7EB7FD',
						fontWeight: '500',
					},
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(0,0,0,.6)',
					borderColor: 'rgba(147, 235, 248, .8)',
					textStyle: {
						color: '#FFF',
					},
				},
				grid: {
					//布局
					show: true,
					left: '30px',
					right: '30px',
					bottom: '10px',
					top: '48px',
					containLabel: true,
					borderColor: '#1F63A3',
				},
				series: [
					// {
					//   data: yData,
					//   type: "line",
					//   symbol: "circle",
					//            //           //   itemStyle: {
					//     color: "#fd754b",
					//   },
					//   name: "有功功率",
					//   areaStyle: {
					//     //右，下，左，上
					//     color: new graphic.LinearGradient(
					//       0,
					//       0,
					//       0,
					//       1,
					//       [
					//         {
					//           offset: 0,
					//           color: "rgba(252,144,16,.7)",
					//         },
					//         {
					//           offset: 1,
					//           color: "rgba(252,144,16,.0)",
					//         },
					//       ],
					//       false
					//     ),
					//   }
					// },
					{
						data: this.info.yData,
						type: 'line',
						symbol: 'none',
						//点样式
						itemStyle: {
							color: '#5083FF',
						},
						name: this.info.cname,
						areaStyle: {
							//右，下，左，上
							borderRadius: [2, 2, 0, 0], //柱体圆角
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: 'rgba(24,210,181,.35)',
									},
									{
										offset: 1,
										color: 'rgba(30,231,231,1)',
									},
								],
								false
							),
						},
					},
				],
			}
		},
	},
}
</script>
<style lang="scss" scoped></style>
